<template>
	<div class="wrap">
		<header-v></header-v>
		<section class="container">
			<div class="banner_2" v-for="item in banner">
				<img :src="item.src" alt="" />
				<p ref='a'>{{ item.desc }}</p>
			</div>
			<div class="content">
				<nav-v></nav-v>
				<consult-v></consult-v>
				<div class="drawing">
					<div class="title"><p>手绘壁画</p><em></em></div>
					<div class="con" v-for="item in drawing">
						<strong>{{ item.title }}</strong>
						<p>{{ item.desc }}</p>
					</div>
				</div>
				<div class="3D">
					<div class="title"><p>3D壁画</p><em></em></div>
					<div class="con" v-for="item in D">
						<p>{{ item.desc }}</p>
						<p>{{ item.desc2 }}</p>
					</div>
				</div>
				<div class="painting">
					<div class="title"><p>油画定制</p><em></em></div>
					<div class="con" v-for="item in painting">
						<p>{{ item.desc }}</p>
						<p>{{ item.desc2 }}</p>								
					</div>
				</div>
				<div class="relief">
					<div class="title"><p>浮雕雕塑</p><em></em></div>
					<div class="con" v-for="item in relief">
						<p>{{ item.desc }}</p>
						<p>{{ item.desc2 }}</p>
					</div>
				</div> 
				<div class="work">
					<div class="title"><p>业务介绍</p><em></em></div>
					<panel :list="list" :type="type"></panel>
				</div>
			</div>
		</section>
		<footer-v></footer-v>
	</div> 
</template>


<script>
import header from '../public/header'
import footer from '../public/footer'
import consult from '../public/consult'
import nav from '../public/nav'
import towBanner from '../../assets/towBanner.jpg'

import service_list from '../../assets/service_list.png'
import service_list2 from '../../assets/service_list2.png'
import { Panel } from 'vux'

export default {
	
  components: {
  	headerV : header,
  	footerV : footer,
  	consultV : consult,
  	navV : nav, Panel
  },
  data () {
    return {
    	banner : [
    		{
    			src : towBanner,
    			desc : '—— 打造时尚有品位的家居生活和人文环境。'
    		}
    	],
    	drawing : [
    		{
    			title : '未来家居装饰的潮流',
    			desc : '手绘墙画（即墙绘）是用环保的绘画颜料，依照主人的爱好和兴趣、迎合家居的整体风格，在墙面上绘出各种图案以达到装饰效果。手绘墙画是近年来居家装饰的潮流，它不但具有很好的装饰效果，独有的画面也体现了主人的时尚品位。手绘作品的每一笔、每一个色彩都是具有个性的，一般会在绘画前根据房间的整体风格、色调来选择尺寸、图案、颜色及造型。为避免出现墙画泛滥、图案重复的问题，手绘师会根据不同的家居风格设计不同的图案，以保证每位业主墙画的独有性。'
    		},
    	],
    	D : [
    		{
    			desc : '3D壁画，此名称为国内俗称。原译：3D街头地画。源自西方街头文化，英文：3D Street Painting 国内译为：3D街头地画、街头地画、街头立体画、三维街头地画、街头三维地画、城市立体画、城市三维立体画等。',
				desc2 :	'目前为止3D壁画还是应用于公共场合比较多，因为3D壁画的视觉效果非常具备震撼力，而且容易产生和观者的互动。展会、活动、公园休闲娱乐、产品宣传利用3D壁画的形式去表现都非常合适。当然将3D壁画用于家居、别墅、会所、宾馆等场所的装饰也不失为一种很有创意的形式。总之，如果创意形式得当，3D壁画完全可以应用于任何一个地方。'
    		}
    	],
    	painting : [
    		{
    			desc : '在中世纪的欧洲，宫廷贵族定制属于自己的油画就已经是一种时代潮流，当时的文艺复兴把油画定制服务推举到了一个空前发展的阶段。油画定制成为一种宫廷贵族的专利，宫廷会聘用最好的艺术家为他们量身打造自己喜欢的作品，用以装饰自己的建筑与空间，也作为一种炫耀自己财富与地位的本钱。当然，随着时间的推移，宫廷贵族没落。定制油画成为普通人都可以拥有的一种艺',
    			desc2 : '术体验，人们可以定制自己喜欢的大师作品，也可定制属于自己想象中的作品，定制属于自己心中最美好的一瞬间。当前油画定制已经形成了一种时尚，重新被人们拾起。家里用艺术品装饰的形式越来越多。'
    		}
    	],
    	relief : [
    		{
    			desc : '浮雕是雕塑与绘画结合的产物，用压缩的办法来处理对象，靠透视等因素来表现三维空间，并只供一面或两面观看。',
    			desc2 : '浮雕是雕刻的一种，雕刻者在一块平板上将他要塑造的形象雕刻出来，使它脱离原来材料的平面。浮雕是雕塑与绘画结合的产物，用压缩的办法来处理对象，靠透视等因素来表现三维空间，并只供一面或两面观看。浮雕一般是附属在另一平面上的，因此在建筑上使用更多，用具器物上也经常可以看到。由于其压缩的特性，所占空间较小，所以适用于多种环境的装饰。近年来，它在城市美化环境中占了越来越重要的地位。浮雕在内容、形式和材质上与圆雕一样丰富多彩。浮雕的材料有石头、木头、象牙和金属等。'
    		}
    	],
    	type : '1',
    	list: [
    		{
		       src: service_list,
		       title: '家装墙绘',
		       desc: '电视背景墙墙绘，沙发背景墙墙绘，儿童房墙绘，餐厅墙绘，天顶墙绘等。',
		    }, 
		    {
		       src: service_list2,
		       title: '商业墙绘',
		       desc: '酒店大堂墙绘、主题酒店墙绘、主题餐厅墙绘、酒吧墙绘、咖啡厅墙绘、别墅墙绘、学校墙绘、幼儿园墙绘、儿童乐园、儿童医院、KTV墙绘等。',
		    },
		    {
		       src: service_list2,
		       title: '户外墙绘',
		       desc: '城市文化墙墙绘，房地产围墙墙绘，新农村围墙，文化礼堂，街景，户外墙等。',
		    }
      	],
    }
  },
  mounted () {
  	setTimeout(()=>{	
  		this.$refs.a[0].style.right="0"
  	},300)
  }
}

</script>

<style type="text/css" scoped>
	/* service.style */

	.content .con{
		padding: 0 0.2rem;color:#696969; padding-bottom: 0.4rem;
	}
	.content .con strong{ 
		font-size: 0.14rem; line-height: 0.25rem;
	}
	.content .con p{
		line-height: 0.22rem; text-indent: 1.2em;
	}
	.painting, .drawing, .work{
		background: #f7f7f7;
	}
		
	.content .title{
		width:55% !important;margin: 0 auto; position: relative; border-bottom: 0.02rem solid #ccc;  margin-bottom: 0.3rem;  padding-top: 0.2rem;
	}
	.content .title p{
		font-size: 0.24rem; width: 60%; margin: 0 auto; text-align: center; line-height: 0.7rem;
	}
	.content .title em{
		width: 40%; height: 0.02rem; background: #0093dd !important; position: absolute; left: 30%;
	}

</style>
<style type="text/css">
	.banner_2{
		position: relative;
	}
	.banner_2 img{
		width: 100%; height: 0.9rem;
	}
	.banner_2 p{
		color: #fff; position: absolute; top: 0.6rem; right: -22rem; -webkit-transition: 0.2s; transition: 0.5s;
	}
	
	.weui-panel:before, .weui-media-box:before{
		border: none !important;
	}
	.work .weui-media-box__hd{
		width: 0.82rem !important; height: 0.82rem !important;
	}
	.work .weui-media-box__hd img{
		width: 0.82rem !important; height: 0.82rem !important; margin-left: 0.08rem;
	}
	.work .weui-media-box__title{
		color:#696969 !important; font-size: 0.16rem !important; font-weight: bold;
	}
	.work .weui-media-box__desc{
		color:#696969; width: 98%; -webkit-line-clamp:inherit; line-height: 0.22rem; font-size: 0.12rem;
	}
	.work .weui-panel {
		background: none;
	}
	
	.work .weui-panel__bd a:nth-of-type(3){
		padding-bottom: 0.4rem;
	}
</style>
